<!--  -->
<template>
  <div class="transfer-container" :style="{ height: height, width: width }">
    <el-transfer
      class="flex justify-center items-center h-full w-full"
      :titles="titles"
      v-model="checkItemArr"
      filterable
      :data="transferData"
      @change="dataChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  transferData: {
    type: Object,
    require: true
  },
  checkData: {
    type: Array,
    default: () => []
  },
  height: {
    type: String,
    default: () => '100%'
  },
  width: {
    type: String,
    default: () => '100%'
  },
  titles: {
    type: Array,
    default: []
  }
})

const emits = defineEmits(['change'])

const checkItemArr = ref([])

if (props.checkData.length) {
  checkItemArr.value = props.checkData
}

const dataChange = (value) => {
  emits('change', value)
}
</script>

<style lang="scss" scoped>
.transfer-container {
  :deep(.el-transfer-panel) {
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 80%;
    .el-transfer-panel__header {
      border: 1px solid #0269c5;
    }
    .el-transfer-panel__body {
      flex: 1 1 0;
      border: 1px solid #0269c5;
      .el-transfer-panel__list {
        /* 定制滚动条样式 */
        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #2c4d72;
          border-radius: 5px;
        }
        &::-webkit-scrollbar-track {
          background-color: none;
        }
      }
    }
  }
}
</style>
